<template>
  <div class="any_tanxing head">
    <div class="head_nav any_tanxing">
      <i
        @click="menuchange"
        :class="[leftopen == true ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
      ></i>

      <div class="menu any_tanxing">
        <a
          v-for="(list, i) in strhead(menu_tree_head)"
          :class="{
            router_link_active:
              list.title ==
              ($store.state.parentTitle || menu_tree_head[0].title),
          }"
          @click.prevent="headStore(list, i)"
          :key="i"
        >
          <i :class="list.piclink"></i>
          {{ list.title }}
        </a>
        <!-- <a @click.prevent="toggle" class="add-menu-head">+</a> -->
      </div>
    </div>
    <div class="head_right any_tanxing">
      <div class="linemap">
        <i
          class="el-icon-map-location"
          style="font-size: 21px; margin-top: 18px"
        ></i>
        <div class="list_hover_avtive any_tanxing linemapactive">
          <div
            class="tree_item"
            v-for="(item, i) in strhead(menu_tree_head)"
            :key="i"
          >
            <h3>{{ item.title }}</h3>
            <ul>
              <li v-for="(it, index) in item.z" :key="index" class="mar_lf_15">
                <a @click.prevent="toMenu(it, i, item)" class="tree_er">{{
                  it.title
                }}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="any_tanxing"
        style="justify-content: flex-start; align-items: center"
      >
        <div
          class="icon_tz"
          :style="allUnreadCount > 0 ? 'margin-right: 20px;' : ''"
          v-if="
            isservice == '1' &&
            $store.state.plugin &&
            $store.state.plugin.btkfxt &&
            $store.state.plugin.btkfxt.is_open == 1
          "
        >
          <router-link to="/im/im">
            <i class="fa fa-bell-o" style="font-size: 20px"></i>

            <span class="color1" v-if="allUnreadCount > 0">
              <el-badge
                :value="allUnreadCount"
                :max="99"
                class="adge-item"
              ></el-badge>
            </span>
          </router-link>
        </div>

        <div v-if="isNotice == '1'">
          <notice></notice>
        </div>

        <div class="right_info">
          <div class="right_info_ava">
            <img src="./../assets/img/avauser.jpg" alt="" />
          </div>
          <span class="el-dropdown-link user_info">
            Hi {{ userName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <ul class="user_list tl">
            <li @click="toSet('管理')">
              <i class="fa fa-user-circle"></i> 后台管理
            </li>
            <li @click="dialogChangePassVisible = true">
              <i class="fa fa-key"></i> 修改密码
            </li>
            <li @click="signOut"><i class="fa fa-power-off"></i> 退出</li>
          </ul>
        </div>
      </div>
    </div>

    <el-dialog
      title="修改密码"
      close="myDialog"
      :modal="false"
      :visible.sync="dialogChangePassVisible"
      width="600px"
    >
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        label-width="120px"
      >
        <el-form-item label="请输入原密码" prop="old_pass">
          <el-col :span="4">
            <el-input
              type="password"
              placeholder
              v-model="ruleForm2.old_pass"
              style="width: 400px"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="请输入新密码" class="hongxing" prop="new_pass">
          <el-col :span="4">
            <el-input
              type="password"
              placeholder
              v-model="ruleForm2.new_pass"
              style="width: 400px"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="再输入新密码" class="hongxing" prop="re_pass">
          <el-col :span="4">
            <el-input
              type="password"
              placeholder
              v-model="ruleForm2.re_pass"
              style="width: 400px"
            ></el-input>
          </el-col>
        </el-form-item>

        <div class="mar_bottom_15">
          <el-button
            :loading="$store.state.isLoading"
            size="small"
            type="primary"
            @click="subChangePass('ruleForm2')"
            >确定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <audio id="meassage-audio">
      <source src="../assets/audio/audio-message.mp3" type="audio/mpeg" />
    </audio>
  </div>
</template>
<script>
import { mapState } from "vuex";
import notice from "@/components/currency/notice.vue";

export default {
  components: {
    notice,
  },
  props: ["adminObj"],
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.re_pass !== "") {
          this.$refs.ruleForm2.validateField("re_pass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.new_pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      page: "",
      page_size: "",

      HeadTitle: "",
      HeadContent: "",
      HeadTime: "",
      dialogChangePassVisible: false,
      menu_tree_head: this.$store.state.menuList,
      menu: "",
      selectedOptions: "",
      show: false,
      add: "",
      active: "",
      ruleForm2: {
        old_pass: "",
        new_pass: "",
        re_pass: "",
      },
      rules2: {
        old_pass: [
          // { validator: validateOldPass, trigger: 'blur' }
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        new_pass: [{ validator: validatePass, trigger: "blur" }],
        re_pass: [{ validator: validatePass2, trigger: "blur" }],
      },

      visible: false,
      userName: this.$store.state.adminname,
      adminLogo: "",
      activeName: "0",
      isservice: this.$store.state.isservice || "0",
      isNotice: this.$store.state.isNotice || "0",
    };
  },
  methods: {
    menuchange() {
      this.$store.commit("setLeftOpen", !this.leftopen);
    },
    strhead(obj) {
      if (obj) {
        var arr = obj.filter((item) => item.show_top == "1");
        return arr;
      }
    },
    toggle() {
      ///index/admin/cuxiao
      var obj = this.menu_tree_head;
      var url = "/index/admin/mymodel";
      this.$fnc.tomenu(url, obj);
    },
    subChangePass(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        }
        var data = {
          old_password: this.$getCode(this.ruleForm2.old_pass),
          new_password: this.$getCode(this.ruleForm2.new_pass),
          re_password: this.$getCode(this.ruleForm2.re_pass),
        };
        console.log(data);
        this.$api.getAdminuser.changeAdminPass(data).then((res) => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess({ text: "修改成功" });
            this.visible = false;
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      });
    },
    closeDialog() {},
    headStore(list) {
      this.$store.commit("setbreadcrumbs", []);
      this.$store.commit("setParentTtile", list.title);
      sessionStorage.setItem("parentTitle", list.title);
      if (list.z) {
        this.$store.commit("setTitle", list.z[0].title);
        sessionStorage.setItem("title", list.z[0].title);
        if (list.z[0].z) {
          this.$store.commit("setTitle2", list.z[0].z[0].title);
          this.$store.commit("showTitle2", true);
          this.$router.push(list.z[0].z[0].url);
        } else {
          this.$router.push(list.z[0].url);
          this.$store.commit("showTitle2", false);
        }
      }
    },
    toSet(str) {
      var data = this.menu_tree_head || [];
      for (var i in data) {
        if (data[i].title == str) {
          if (data[i].z == undefined) {
            this.$store.commit("setTitle", data[i].z[0].title);
            if (data[i].z[0].z) {
              this.$router.push(data[i].z[0].z[0].url);
            }
          } else {
            this.$router.push(data[i].z[0].url);
          }
          return false;
        }
      }
    },
    toMenu(item) {
      this.$store.commit("setId", item.parent_id);
      this.$store.commit("setTitle", item.title);
      this.$store.commit("setParentTtile", item.parent_title);
      sessionStorage.setItem("title", item.title);
      sessionStorage.setItem("parentTitle", item.parent_title);
      var url;
      if (item.z) {
        this.$store.commit("setTitle2", item.z[0].title);
        this.$store.commit("showTitle2", true);
        url = item.z[0].url;
      } else {
        url = item.url;
        this.$router.push(item.url);
        this.$store.commit("showTitle2", false);
      }
      if (url == this.$route.path) {
        this.$router.push({
          path: "/redirect",
          query: url,
        });
      } else {
        this.$router.push({
          path: url,
        });
      }
    },
    toMenuSan(it, li) {
      this.$router.push(li.url);
    },
    signOut() {
      // this.$store.dispatch('logout');
      // this.$store.commit("reset");
      this.$confirm("是否退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
           this.$store.dispatch('logout');
          this.$store.commit("reset");
          this.$store.commit("loginOut");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },

  created() {},
  computed: {
    allUnreadCount() {
      var index = 0;
      for (var i in this.conversationList) {
        index += this.conversationList[i].unreadCount;
      }

      return index; //得到总IM未读消息
    },
    ...mapState({
      conversationList: (state) => state.conversation.conversationList,
      headObj: (state) => state.headTitleInfo,
      adminTitle: (state) => state.adminTitle,
      leftopen: (state) => state.leftopen || false,
    }),

    getMenu() {
      return this.$store.state.menuList;
    },
    getLogo() {
      return this.$store.state.headTitleInfo;
    },
    getUsername() {
      return this.$store.state.adminname;
    },
    getisservice() {
      return this.$store.state.isservice;
    },
  },
  watch: {
    getisservice(val) {
      this.isservice = val;
    },

    showFrom(val) {
      this.showFrom = val;
    },
    getMenu(obj) {
      this.menu_tree_head = obj;
    },
    getUsername(name) {
      this.userName = name;
    },
    adminObj(obj) {
      if (obj.iden == "ht_title") {
        document.title = obj.value;
      }
      if (obj.iden == "ht_logo") {
        this.adminLogo = obj.value;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@size_color: #d2edec;
@height: 60px;
.head {
  height: @height;
  background: url("../assets/img/headImg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  justify-content: space-between;
}

.head_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  > i {
    font-size: 28px;
    margin: 0 15px;
    color: #fff;
  }
}
.head_nav_log {
  width: 200px;
  padding-left: 15px;

  > a {
    display: block;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    text-align: left;
    cursor: pointer;
  }
}
.head_nav_log img {
  vertical-align: middle;
  max-width: 70%;
}

.menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 100%;
  line-height: @height;
  > a {
    overflow: hidden;
    //隐藏部分显示为省略号
    text-overflow: ellipsis;
    //禁止文本自动换行
    white-space: nowrap;
    min-width: 100px;
    padding: 0 10px;
    color: @size_color;
    font-size: 15px;
    display: inline-block;
    // margin-right: 26px;
    height: 100%;
    line-height: 62px;
    cursor: pointer;
    > i {
      font-size: 20px;
      margin-right: 5px;
    }
  }
  > a.add-menu-head {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px dashed #d2edec;
    font-weight: bold;
    margin-top: 15px;
  }
}
.head_right {
  line-height: @height;
}

.head_right_inp {
  width: 180px;
  height: 50px;
  position: relative;
  margin-right: 40px;
  position: relative;
  > div.line {
    position: absolute;
    width: 1px;
    height: 27px;
    background: #ddd;
    right: 2rem;
    top: 17.1px;
  }
}
.el-dropdown-link i {
  transition: all 0.2s linear;
}
.right_info:hover .el-dropdown-link i {
  transform: rotate(-180deg);
}
.right_info:hover .user_list {
  display: block;
}
.right_info .right_info_ava {
  width: 35px;
  height: 35px;
  > img {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
.user_list {
  display: none;
  position: absolute;
  border-radius: 0 4px 4px 0;
  background: #fff;
  width: 150px;
  right: 10px;
  top: 60px;
  line-height: 3;
  border: 1px solid #dcdfe6;
  z-index: 9999;
  > li {
    padding: 0 10px;
    cursor: pointer;
  }
  li:hover {
    color: red;
  }
}
.user_list::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 30%;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent #fff;
}
.icon_tz {
  cursor: pointer;
  position: relative;
  color: #fff;
  margin-right: 10px;
  width: 15px;
  > a {
    color: #fff;
  }
  span {
    position: absolute;
    // width: 10px; /*no*/
    // height: 10px; /*PX*/
    // border-radius: 50%;
    top: 10px;
    right: 8px;
    // animation: bianse 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    // box-shadow: inset 0 0 20px 5px rgba(255, 255, 255, 0.4);
  }
  .color1 {
    background: linear-gradient(45deg, #ff5370, #ff869a);
  }
  .color2 {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
  }
}
@keyframes bianse {
  0% {
    box-shadow: inset 0 0 20px 2px rgba(255, 255, 255, 0.4);
  }
  25% {
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.35);
  }
  55% {
    box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0);
  }
}
.right_info {
  width: 230px;
  background-color: rgba(255, 255, 255, 0.1);
  // margin-right: 15px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  padding: 0 0 0 10px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.router_link_active {
  border-bottom: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.adge-item {
  position: absolute;
  top: -20px;
  right: -30px;
}
.linemap {
  position: relative;
  font-size: 14px;
  /* font-weight: bold; */
  cursor: pointer;
  color: #fff;
  width: 65px;
  > i {
    font-size: 18px;
  }
}
.linemap:hover .linemapactive {
  display: flex !important;
}
.linemapactive h3 {
  color: #333;
}
.linemapactive {
  left: -1560%;
  top: 63px;
}
</style>
